<template>
    <view class="content">
        <view class="list">
			<view><img src="https://sp4-lanqiao-shop-vue.netlify.app/img/lanqiao-logo.5de12f2e.svg" alt="" style="width: 100%;height: 50px;" ></view>
            <view class="item"><input type="text" placeholder="请输入手机号" v-model="phone"></view>
            <view class="item"><input type="text" placeholder="请输入密码" v-model="password" password></view>
            <view class="item"><input type="text" placeholder="确认密码" v-model="doupassword" password></view>
        </view>
        <view><button type="primary" @click="regiter">注册</button></view>
		<view @click="login1()" style="margin-top:20px"><button>已有账号去登录</button></view>
		<!-- <view>{{users}}</view> -->
    </view>
</template>
<script>
	import Config from '@/Config.js'
export default {
	data(){
		return{
			phone:'',
			password:'',
			doupassword:'',
			users:[],
			newUser: null
			
		}
	},
	onLoad(){
		this.fetch()
	},
	methods:{
		//获取用户信息
		fetch(){
			uni.request({
			 url: Config.api_host+`/users`,
                 success: (res) => {
                    this.users = res.data;     
				 }
		})
		},
		regiter(){
			if (!this.phone ) {
				 uni.showToast({
                    title: '手机号不能为空',
                    icon: 'none'
                });
                return;	
			}else if (!/^1[3-9]\d{9}$/.test(this.phone)){
				 uni.showToast({
                    title: '正确格式手机号',
                    icon: 'none'
                });
			}else if (!this.password){
				uni.showToast({
                    title: '密码不能为空',
                    icon: 'none'
                });
                return;	
			}else if (this.password.length < 6){
				uni.showToast({
                    title: '密码长度大于6位',
                    icon: 'none'
                });
                return;	

			} else if (this.password !== this.doupassword) {
                uni.showToast({
                    title: '两次输入的密码不一致',
                    icon: 'none'
                });
                return;
            }else if(this.users.some(user => user.phone === this.phone)){
				uni.showToast({
                    title: '该手机号已注册',
                    icon: 'none'
                });
                return;

			}else{
					uni.request({
				    url: Config.api_host+'/users',
                    method: 'POST',
					data:{
						phone: this.phone,
                        password: this.password,
						img:'https://img0.baidu.com/it/u=3125720667,3310351231&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
						
					},
				
					success: (res) => {
                        if (res.statusCode === 201) {
							this.users.push(res.data);
                            // uni.showToast({
                            //     title: '注册成功',
                            //     icon: 'success'
                            // });
							// setTimeout(()=>{
							// 	uni.navigateTo({
							// 		url:`/pages/login/login`
							// 	})
							// })

							 uni.showToast({
                              title: '注册成功',
                              icon: 'success',
                              duration: 1500,
                              success: () => {
                              // 提示显示完成后跳转
                                 setTimeout(() => {
                                    uni.navigateTo({
                                      url: '/pages/login/login'//跳转tabbar注册页面
                                    });
                                 }, 300); // 稍微延迟300ms确保动画完成
                              }
                            });





                        } else {
                            uni.showToast({
                                title: '注册失败，请稍后重试',
                                icon: 'none'
                            });
                        }
                    },
				})
			}
			
				
			},

			//已有账号去登录
		login1(){
			uni.navigateTo({
              url:`/pages/login/login`
            })  
		},
			
		},
		
		
	}
	

</script>


<style scoped>
.content .list{
    padding-top: 20px;
	background-color:white;
	height: 250px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    margin-bottom: 20px;
  

}
.content .list .item{
    width: 90%;
	height: 50px;
	background-color: aliceblue;
	border-radius: 4pt;
	border: 1px solid rgb(221, 216, 216);
	display: flex;
	/* justify-content: center; */
	align-items: center;
	padding-left: 20px;

}
.content .list .item input{

}
</style>